<html>
<head>
	<title>charts</title>
<!--	<script src="https://www.google.com/jsapi"></script> -->
<!--	<script src="chart.js"></script>	 -->

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
<script src="jqchart/jquery.gchart.js"></script>
<script src="jqchart/jquery.gchart.graphviz.js"></script>
<style>
#visualization { width: 800px; height: 400px; }
</style>

</head>
<body>
<div id="visualization"></div>
<script>
//	$("#visualization").gchart({type: 'graphviz', series: [$.gchart.series([20, 50, 30])]});
// label: '<f0> left | <f1> middle | <f2> right'

window.addEventListener('load', (event) => {
$('#visualization').gchart($.gchart.graphviz(true,
 {
 struct1: {label: '<f0> left |<f1> middle |<f2> right'},
 struct2: {label: '<f0> one|<f1> two'},
 struct3: {label: 'hello\nworld |{ b |{c|<here> d|e}| f}| g | h'}
 },
 {
 'struct1:f1': ['struct2:f0'],
 'struct2:f2': ['struct3:here']
        },
 {
                node: {shape: 'record'}
        }
));
});


// $('#visualization').gchart($.gchart.graphviz(true, 
// 	{struct1: {label: "<f0> left |<f1> middle |<f2> right"},
// 	 struct2: {label: "<f0> one|<f1> two"},
// 	 struct3: {label: "hello\ world |{ b |{c|<here> d|e}| f}| g | h"}
// 	},
// 	{'struct1:f1': ['struct2:f0'],
// 	 'struct2:f2': ['struct3:here']},
// 	 {node: {shape: 'record'}})) 
</script>




</body>
</html>